<template>
  <div>
    <div class="vip">
      <!-- <div class="vip_one">
        <div>292</div>
        <div>剩余次数</div>
      </div> -->
      <div class="tow">
        <div class="tow_">
          <div class="vip_tow">尊享权益</div>
        </div>
        <div class="vip_box">
          <div class="vip_three">
            <div>1. 下载次数不受时间影响</div>
            <div>2. 6个专享模板使用</div>
            <div>3. APP可以永久保存</div>
          </div>
          <div class="vip_four">
            <div>4. 自定义短连接</div>
            <div>5. CDN加速下载</div>
            <div>等更多尊享权益</div>
          </div>
        </div>
      </div>
      <div class="five_">
        <div class="vip_five" @click="goUrl('/price', 'price')">充值</div>
      </div>
    </div>
    <div class="order">
      <table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)" class="order-loading">
        <thead class="table_thead">
          <tr class="table100-head">
            <th class="column1 columnColor">付款时间</th>
            <th class="column1 columnColor">商品名称</th>
            <th class="column2 columnColor">订单编号</th>
            <th class="column3 columnColor">支付方式</th>
            <th class="column3 columnColor">金额(元)</th>
            <th class="column3 columnColor">状态</th>
          </tr>
        </thead>
        <tbody style="text-align: center;">
          <tr class="orderlist" v-for="(item,index) in tableList" :key="index">
            <td class="column1">
              <div>{{ item.addtime }}</div>
            </td>
            <td class="column1">
              <div>{{ item.title }}</div>
            </td>
            <td class="column2">
              <div>{{ item.orderid }}</div>
            </td>
            <td class="column3">
              <div>{{ item.paytype }}</div>
            </td>
            <td class="column3">
              <div>{{ item.buymoney }}</div>
            </td>
            <td class="column3">
              <div>{{ item.status }}</div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pagination" v-show="!loading">
        <el-pagination small :page-size="pagesize" background layout="prev, pager, next" :total="total"
          @current-change="currentchange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import filters from "../../utils/filters";

  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //表单中的数据
      return {
        tableData: [], //后台的数据
        tableList: [], //单页显示的数据
        total: 0, //页码的总数
        pagesize: 8, //单页显示的条数
        currentPage: 1, //当前的页码
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      query() {
        this.loading = true
        this.$post(this.API.UserOrder).then((res) => {
          if (res) {
            this.loading = false
            this.tableData = res.data;
            this.total = this.tableData.length;
            this.currentchange(1)
          }
        });
      },
      //跳转充值页面
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name,
        });
      },
      // 监听页码改变的事件
      currentchange(newpage) {
        this.currentPage = this.currentPage;
        this.tableList = this.tableData.slice((newpage - 1) * this.pagesize, newpage * this.pagesize)
      },
      // 行的样式
      rowStyle() {
        return {
          height: "40px",
        }
      },
      // 列的样式
      cellStyle() {
        return {
          padding: 0,
        }
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.query();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
  };

</script>
<style scoped>
  .vip {
    display: flex;
    width: 93%;
    height: 120px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 20px;
    background: url("../../assets/img/wode_qybk.png");
    background-size: 100% 100%;
    border-radius: 4px;
    background-color: #272727;
  }

  .vip_one {
    flex: 1;
    align-self: center;
    margin-left: 10px;
  }

  .vip_one div:nth-child(1) {
    font-size: 30px;
    color: #fed89a;
    text-align: center;
  }

  .vip_one div:nth-child(2) {
    font-size: 14px;
    color: #f0b455;
    text-align: center;
  }

  .tow {
    flex: 5;
    display: flex;
  }

  .tow_ {
    flex: 1;
    align-self: center;
  }

  .vip_tow {
    width: 28px;
    height: 76px;
    margin-left: 20px;
    color: #ee792c;
    border: 1px solid #ee792c;
    background-color: transparent;
    border-radius: 8px;
    writing-mode: vertical-rl;
    line-height: 28px;
    text-align: center;
  }

  .vip_box {
    flex: 4;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    margin-left: -20px;
  }

  .vip_three {
    flex: 2;
  }

  .vip_four {
    flex: 2;
  }

  .five_ {
    flex: 2;
    align-self: center;
  }

  .vip_five {
    width: 143px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(to right, #f59830, #f55810);
    border-radius: 24px;
    cursor: pointer;
    font-size: 18px;
    margin-left: 40px;
  }

  .order {
    width: 93%;
    margin: 0 auto;
    background-color: #272727;
    border-radius: 8px;
  }

  .order-loading>>>.el-loading-spinner i {
    color: #FF7226;
  }

  .order-loading>>>.el-loading-spinner .el-loading-text {
    color: #FF7226;
  }

  .table_thead {
    font-size: 16px;
  }

  .pagination {
    width: 100%;
    text-align: center;
  }

  .column1 {
    width: 184px;
  }

  .column2 {
    width: 222px;
  }

  .column3 {
    width: 110px;
  }

  .orderlist {
    height: 45px;
    font-size: 12px;
    border-top: 1px solid #343434;
    border-collapse: collapse;
    color: #FFF;
  }

  .orderlist:last-child {
    border-bottom: 1px solid #343434;
  }

  .columnColor {
    background-color: #272727;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #FFF;
    border-radius: 8px;
  }

  div>>>.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #FF7226 !important;
    color: #FFF;
  }

  div>>>.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #FF7226;
  }

  div>>>div[data-v-4dc1f2ac] .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #FF7226 !important;
    color: #fff;
  }

  @media screen and (max-width: 992px) {
    .vip {
      height: auto;
    }

    .vip_one {
      flex: 2;
    }


    .vip_box {
      flex: 6;
      flex-direction: column;
      align-items: flex-start;
      font-size: 12px !important;
      margin-left: 5%;
    }

    .five_ {
      flex: 2;
    }

    .table_thead {
      display: none;
    }



    .orderlist {
      display: flex;
      height: auto;
      overflow: hidden;
      flex-direction: column;
    }

    table tbody {
      overflow: hidden;
    }

    table tbody tr {
      display: flex;
      width: 86vw;
      flex-direction: row;
      align-items: center;
      margin-top: 10px;
      padding-bottom: 10px;

    }

    .orderlist td {
      display: flex;
      flex-direction: row;
      justify-content: center;
      font-size: 16px;
      width: 100%;
    }

    table tbody tr td:before {
      width: 35%;
      text-align: right;
      color: #000000;
      margin-right: 20px;
      margin-top: 5px;
    }

    tr td div {
      width: 65%;
      color: #A2A1A2;
      text-align: left;
      margin-top: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

    }


    table tbody tr td:nth-child(1):before {
      content: "付款时间:";
    }

    table tbody tr td:nth-child(2):before {
      content: "商品名称:";
    }

    table tbody tr td:nth-child(3):before {
      content: "订单编号:";
    }

    table tbody tr td:nth-child(4):before {
      content: "支付方式:";
    }

    table tbody tr td:nth-child(5):before {
      content: "金额(元):";
    }

    table tbody tr td:nth-child(6):before {
      content: "状态:";
    }

    .pagination {
      width: 93%;
      text-align: center;
    }




  }

</style>
